import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import china from '@/utils/china.json';
import styles from './index.less';

interface Props {
  op: object;
}
export default (props: Props) => {
  var myChart;
  const chartRef = useRef<any>(null);
  useEffect(() => {
    loadingChina();
  }, [props.op]);
  const loadingChina = () => {
    mapOption('piechart', china);
  };
  const mapOption = (mapName: string, data: object) => {
    myChart = echarts.init(chartRef.current);
    echarts.registerMap(mapName, data);
    myChart.setOption(props.op);
    // myChart.dispatchAction({
    //   type: 'select',
    //   seriesIndex: 1,
    //   dataIndex: 0,
    // });
    // var index = 0;
    // myChart.on('mouseover', function (e) {
    //   if (e.dataIndex != index) {
    //     myChart.dispatchAction({
    //       type: 'downplay',
    //       seriesIndex: 1,
    //       dataIndex: index,
    //     });
    //   }
    // });
    // myChart.on('mouseout', function (e) {
    //   index = e.dataIndex;
    //   if (e.seriesIndex == 1) {
    //     myChart.dispatchAction({
    //       type: 'highlight',
    //       seriesIndex: 1,
    //       dataIndex: e.dataIndex,
    //     });
    //   }
    // });
  };
  return <div className={styles.pieChart} ref={chartRef}></div>;
};
